<template>
  <div class="hello">
    姓名：<span>{{user.realName}}</span><br>
    账号：<span>{{user.username}}</span><br>
    密码：<span>{{user.password}}</span><br>
    <button type="botton" @click="getBalance()">获取余额</button>
  </div>  
</template>

<script>
export default {
  data () {
    return {
      user: null
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo: function() {
      var self = this;
      var token = localStorage.getItem("token");
      this.$axios.get('http://localhost:9999/user/info', {
        headers: {
          'Authorization': 'Bearer ' + token
        }
      }).then(function(response) {
        self.user = response.data
      }).catch(function(error) {
        alert(error)
      })
    },
    getBalance: function() {
      var self = this;
      var token = localStorage.getItem("token");
      this.$axios.get('http://localhost:10000/pay/balance', {
        headers: {
          'Authorization': 'Bearer ' + token
        }
      }).then(function(response) {
        alert(response.data)
      }).catch(function(error) {
        alert(error)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
